<template>
  <div class="Detailsimple">
    <el-card>
      <div class="leftimg">
        <el-image :src="GoodsItem.goodsDetailImg" :preview-src-list="[GoodsItem.goodsDetailImg,GoodsItem.goodsDetailImg]" style="height:400px;width:400px;"> </el-image>
      </div>
      <div class="rightcontent">
        <div class="righttitle">
          {{GoodsItem.goodsName}}
        </div>
        <div class="rightclassify">分类:{{GoodsItem.type}}</div>
        <div class="rightprice">
          <span class="nowprice">现价:</span>
          <span class="pricenumber">￥{{GoodsItem.goodsPrice}}</span>
        </div>
        <div class="versions">
          <span>规格:</span>
          <el-radio-group class="clearfix" v-model="specification">
            <el-radio-button class="version" v-for="item,index in GoodsItem.specifications" :label="index" :key="index">{{item}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="shopnumber">
          <span>购买数量:</span>
          <el-input-number
            v-model="amount"
            :min="1"
            :max="99"
            label="描述文字"
          ></el-input-number>
          <el-button type="success" icon="el-icon-shopping-cart-2" @click="addToShoppingcart()"
            >加入购物车</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import {insertProductToShopcart} from '@/apis/insertData.js';
import { ElMessage } from "element-plus";
export default {
  props: {
    GoodsItem: Object,
  },
  data() {
    return {
      specification: 0,
      amount: 1,
    };
  },
  methods:{
    //  添加商品到购物车
    addToShoppingcart(){
      if(this.$store.getters.getUser!=null){
        let params = new FormData();
      params.append("uid", this.$store.getters.getUser.uid);
      params.append("gid", this.GoodsItem.gid);
      params.append("count", this.amount);
      insertProductToShopcart(params).then((res)=>{
          if(res.data.data>0){
            ElMessage.success({
            message: "添加成功",
            type: "success",
          });
          }else{
            ElMessage.error({
            message: "添加失败",
            type: "error",
          });
          }
      }
      );
      }else{
        this.$router.push("/login");
      }
      
    }
  }
};
</script>
<style scoped>
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.leftimg {
  float: left;
  width: 37.5%;
  margin: 0;
  padding-top: 30px;
  padding-bottom:30px;
}

.rightcontent {
  float: right;
  width: 60%;
}

.rightcontent .righttitle {
  color: #666;
  padding-top: 10px;
  line-height: 28px;
  margin-bottom: 5px;
}

.rightcontent .rightclassify {
  color: red;
  padding-top: 10px;
  line-height: 28px;
  margin-bottom: 5px;
}
.rightcontent .rightprice {
  padding-left: 8px;
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 10px;
  background-color: rgb(245, 245, 245);
}
.rightprice .nowprice {
  letter-spacing: 6px;
}
.rightprice .pricenumber {
  color: red;
  font-weight: bold;
  font-size: 20px;
}

.rightcontent .versions {
  margin-top: 20px;
  margin-bottom: 10px;
}

.rightcontent .versions span {
  margin-right: 20px;
}
.rightcontent .versions .version {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  border-left: 1px solid #dcdfe6;
  border-radius: 3px 3px 3px 3px;
}
.rightcontent .versions >>> .el-radio-button:last-child .el-radio-button__inner{
  border-radius: 3px 3px 3px 3px;
}

.rightcontent .shopnumber span {
  margin-right: 30px;
}

.rightcontent .shopnumber button {
  margin-left: 30px;
}

.shopnumber {
  margin-top: 30px;
}
</style>